<template>
	<view v-if="videoList">
		<view class="video-box" v-for="(item,i) in videoList">
			<view class="video-top" @click="navigateToDetail(item)">
				<image :src="item.touxiang" mode="" class="touxiang"></image>
				<view class="author">{{item.author}}</view>
				<button type="default">关注</button>
				<view class="comment-icon">
					<image src="../static/editor.png" mode="aspectFit"></image>
					<image src="../static/praise_fill.png" mode="aspectFit"></image>
					<image src="../static/more.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="video-bottom">
				<view class="title"  @click="navigateToDetail(item)">
					{{item.title}}
				</view>
				<video :src="item.videoLink" controls></video>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "MyVideo",
		data() {
			return {
				videoList: []
			};
		},
		methods: {
			getData() {
				uniCloud.callFunction({
					name: "getVideo",
					success: (e) => {
						console.log("加载视频成功");
						this.videoList = e.result.data
					},
					fail: (err) => {
						console.log("加载失败", err);
					}
				})
			},
			navigateToDetail(item) {
				uni.navigateTo({
					url: '/pages/news_video/video_detail?data=' + JSON.stringify(item)
				});
			}
		},
		created() {
			this.getData()
		}

	}
</script>

<style>
	button {
		display: inline-block;
		padding: 0rpx 20rpx;
		font-size: 22rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #F5433F;
		color: white;
	}

	video {
		width: 100%;
	}

	.comment-icon {
		display: flex;
		gap: 30rpx;
	}

	.comment-icon image {
		height: 80rpx;
		width: 50rpx;
	}

	.touxiang {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.title {
		padding: 30rpx 0;
	}

	.author {
		width: 30%;
		font-size: 36rpx;
	}

	.video-top {
		display: flex;
		align-items: center;
		gap: 20rpx;
		border-bottom: #ccc solid 3rpx;
		padding: 30rpx 0;
	}

	.video-box {
		padding: 20rpx;
	}
</style>